<template>
    <Header></Header>
    <NavSwiper></NavSwiper> 

    <!-- 两种异步加载的方法，
    第一个是用Suspense 
    第二个是用vueuse的插件
    -->
    <!-- <Suspense>
        <template #default>
            <NewGoodCourse></NewGoodCourse>
        </template>
        <template #fallback>
            Loading······
        </template>
    </Suspense> -->

    <div ref="target">  
        <NewGoodCourse v-if='targetIsVisible'></NewGoodCourse>
    </div>
    <Foot></Foot>
</template>

<script setup>
import { useIntersectionObserver } from '@vueuse/core'
import Header from '../components/common/Header.vue'
import NavSwiper from '../components/home/NavSwiper.vue'
import Foot from '../components/common/Foot.vue'

const NewGoodCourse = defineAsyncComponent(() =>
  import('../components/home/NewGoodCourse.vue')
)

const target = ref(null);
const targetIsVisible = ref(false);


const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
  	if( isIntersecting ) {
  		targetIsVisible.value = isIntersecting
  	}
  }
)
</script>
